<template>
  <div class="EmergencyList">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb>
        <el-breadcrumb-item>消息待办列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <!-- 列表筛选 -->
      <filterTitle @query="query" @reset="reset" :form="form" :formData="formData" labelWidth="140px">
        <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
          <el-form-item :label="item.label + '：'" v-for="(item, index) in formData" :key="index" :prop="item.id">
            <LsdForm :compData="item" :form="form" />
          </el-form-item>
        </el-form> -->
      </filterTitle>
      <!-- 列表表格 -->
      <LsdTable slot="gjxm" @select="handleSelectionChange" @select-all="handleSelectionChange"
        :paginationAtrrs="paginationAtrrs" @pageChange="handleSizeChange" :compRef="table.compRef" ref="gjxm"
        :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData"
        :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag"
        :isSequenceFlag="table.isSequenceFlag" @onActionClick="onActionClick" />
    </div>
  </div>
</template>

<script>
import {
  listPage,
  updateReadState
} from "@/api/EarlyWarningManagement/xxdb";
import { showTime } from "@/lib";
export default {
  name: "MessageAgentList",
  components: {},
  data() {
    return {
      type: 0, // 区分编辑和新增
      multipleSelection: [], // 单选全选
      // 筛选信息
      formData: [
        {
          elType: "input",
          id: "title",
          label: "标题",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            "collapse-tags": true
          }
        },
        {
          elType: "select",
          id: "msgState",
          label: "状态",
          attrs: {
            value: "",
            size: "small",
            clearable: true,
            filterable: true,
            "collapse-tags": true
          },
          options: [
            { label: "未读", value: "0" },
            { label: "已读", value: "1" }
          ]
        }
      ],
      // 表格信息
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: true, // 是否展示分页
        resetFlag: true,
        loading: false,
        title: "消息待办列表",
        actions: [],
        tableData: [],
        columns: [
          {
            prop: "title",
            label: "标题",
            align: "left",
            "min-width": "380px"
          },
          {
            prop: "msgType",
            label: "消息类型",
            align: "center"
          },
          {
            prop: "msgState",
            label: "状态",
            align: "center",
            render: (h, { row }) => {
              return (
                <div>
                  <span slot='reference' style='display:flex;align-items:center;justify-content:center'>
                    <div class='dotClass' style={{ background: row.msgState === "0" ? "#EC808D" : "#D7D7D7", width: "10px", height: "10px", "border-radius": "50%", "margin-right": "8px" }}></div>
                    <div>{row.msgState === "0" ? "未读" : "已读"}</div>
                  </span>
                </div >
              );
            }
          },
          {
            prop: "submitTime",
            label: "时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "cz",
            label: "操作",
            align: "center",
            fixed: "right",
            "min-width": "50px",
            render: (h, { row }) => {
              return (
                <div>
                  {
                    <span
                      style='color:#3561fd;cursor:pointer;margin:0 10px'
                      {...{
                        on: {
                          click: () => {
                            this.HanEdit(row);
                          }
                        }
                      }}
                    >
                      查看
                    </span>
                  }
                </div>
              );
            }
          }
        ],
        // 表格样式
        tableAttr: {
          "max-height": "470px",
          height: "470px",
          stripe: false,
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": true,
          "cell-style": {
            "font-size": "16px"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#B1C8F9",
            border: "1px solid #ccc",
            "font-size": "16px"
          }
        }
      },
      // 分页信息
      paginationAtrrs: {
        total: 0,
        "background": true,
        layout: "prev, pager, next",
        "current-page": 1,
        "page-size": 10
      },
      activeNames: ["1", "2", "3"], // 折叠面板默认展开列
      form: {}, // 筛选from
      pageNumber: 1,
      pageSize: 10,
      fid: "",
      FilledBy: {}
    };
  },
  watch: {
    "$route.query.warningInfoStatus": {
      handler() {
        this.list();
      },
      deep: true
    },
    "$store.state.MessageCount": {
      handler(newval, oldval) {
        if (newval !== oldval) {
          this.list();
        }
      },
      deep: true
    }
  },
  mounted() {
    const FilledBy = {
      creator: JSON.parse(sessionStorage.getItem("account")).realName,
      creatorId: JSON.parse(sessionStorage.getItem("account")).id,
      deptId: JSON.parse(sessionStorage.getItem("org")).orgCode,
      unitDeptName: JSON.parse(sessionStorage.getItem("org")).orgName,
      createTime: showTime(new Date())
    };
    this.FilledBy = FilledBy;
    this.list(FilledBy.creatorId);
  },
  methods: {
    // 弹窗按钮点击事件 对应id绑定事件
    handleBtn(item) {
      this[item.id]();
    },
    // 重置
    reset() {
      this.form = this.$options.data().form;
      this.list(this.FilledBy.creatorId);
    },
    // 检索
    async query() {
      const parmas = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        title: this.form.title,
        msgState: this.form.msgState,
        issueUserId: this.FilledBy.creatorId
      };
      const res = await listPage(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    // 列表
    async list(id) {
      const parmas = {
        pageNumber: this.pageNumber,
        pageSize: this.pageSize,
        issueUserId: id
      };
      const res = await listPage(parmas);
      this.table.tableData = res.data;
      this.paginationAtrrs.total = res.total;
    },
    HanEdit(row) {
      // /warningInfo  预警研判
      // /warningNotification 预警通知单
      // /warningMainTask  预警主任务
      // /warningSubMainTask 预警子任务
      const detailType = row.route;
      if (detailType === "/warningInfo") {
        this.$router.push({
          path: "/EarlyJudgmentList",
          query: { judgeState: "1", id: row.formId, taskType: "db" }
        });
      } else if (detailType === "/warningNotification") {
        this.$router.push({
          path: "/NoticeList",
          query: { noticeState: "1", id: row.formId, taskType: "db" }
        });
      } else if (detailType === "/warningMainTask") {
        this.$router.push({
          path: "/WarningActionList",
          query: { flowCode: "2,4,9,11", id: row.formId, taskType: "main" }
        });
      } else if (detailType === "/warningSubMainTask") {
        this.$router.push({
          path: "/WarningActionList",
          query: { flowCode: "2,4,9,11", id: row.formId, taskType: "sub" }
        });
      }
      updateReadState({ id: row.id });
    },
    // 抛出列表按钮
    onActionClick(item, index) {
      this[item.id](); // 调用按钮对应方法
    },
    // 选择器
    handleSelectionChange(val) {
      console.log(val, "??????val");
      this.multipleSelection = val;
    },
    // 分页
    handleSizeChange(val) {
      this.pageNumber = val["current-page"];
      this.pageSize = val["page-size"];
      this.list(this.FilledBy.creatorId);
    }
  }
};
</script>

<style scoped lang="less">
@import "../../assets/style/common.less";
@import "../../assets/style/ComponentStyle.less";
@import "../../assets/style/pop-upNotification.less";

:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}

:deep(.el-dialog) {
  height: 70% !important;
  margin-top: 22vh !important;

  .dialog-footer {
    position: absolute;
    width: 20%;
    bottom: 10px;
    left: 40%;
    display: flex;
    justify-content: space-around;
  }
}

.dotClass {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: block;
  margin-left: 10px; //这个用于圆点居中
  position: absolute;
  top: 10px;
  left: 20px;
}

:deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
  background-color: #f8f9f8;
  /*隔行变色*/
}

//鼠标悬浮样式
:deep(tr.hover-row) {

  &,
  &.el-table__row--striped {

    &,
    &.current-row {
      >td.el-table__cell {
        background: none;
      }
    }
  }
}

.EmergencyList :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}

:deep(.el-breadcrumb) {
  color: #fff !important;
}

.box {
  // height: 100%;
  margin-top: 20px;
  background-color: #fff;
  border-radius: 4px;
  padding: 10px;
  box-sizing: border-box;
}

.daiban {
  width: 53px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #169bd5;
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  margin-left: 2px;
  border-radius: 4px;
}

.bohui {
  width: 53px;
  height: 29px;
  line-height: 29px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #ec808d;
  font-size: 13px;
  color: #fff;
  margin-top: 10px;
  margin-left: 50px;
  border-radius: 4px;
}

.zanbuchuli {
  width: 53px;
  height: 26px;
  line-height: 29px;
  text-align: center;
  padding: 2px;
  display: inline-block;
  background-color: #fff;
  border: 1px solid #333333;
  font-size: 13px;
  color: #333333;
  margin-top: 10px;
  margin-left: 40px;
  border-radius: 4px;
}

:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
</style>
